
//轮播组件
Vue.component('lun-bo',{
    props:{
        group:Array
    },
    data(){
        return{
            num:0,
            times:0
        }
    },
    template:` 
     <div class="lunbo_container">
        <div class="left-btn" @click="leftClick"></div>
        <div class="lunbo_content">
            <ul :style="{'width':group.length*470+'px','left':num+'px'}">
                <li v-for="(item,index) in group">
                        <div :style="{'background':'url('+item.img+') no-repeat'}"></div>
                </li>
            </ul>
        </div>
        <div class="right-btn" @click="rightClick"></div>
     </div>`,
    methods:{
        leftClick:function () {
            if(this.times<this.group.length-3){
                this.num-=470;
                this.times+=1;
            }
        },
        rightClick:function () {
            if(this.times>0){
                this.num+=470;
                this.times-=1;
            }
        }
    }
});

//等待动画界面
Vue.component('loading-biu',{
    template:`
    <div class="loading">
        <div class="spinner">
            <div class="bar1">
            </div>
            <div class="bar2">
            </div>
            <div class="bar3">
            </div>
            <div class="bar4">
            </div>
            <div class="bar5">
            </div>
            <div class="bar6">
            </div>
            <div class="bar7">
            </div>
            <div class="bar8">
            </div>
            <div class="bar9">
            </div>
            <div class="bar10">
            </div>
            <div class="bar11">
            </div>
            <div class="bar12">
            </div>
        </div>
    </div>
    `,
});


